<template>
<van-panel v-if="viewLoading" class="trade-buy-container">
  <div slot="header" class="van-cell van-hairline van-panel__header">
    <div class="van-cell__title"><span>当前零售积分: {{ Math.round(userWallet.price_retail,2) }}</span></div>
    <!--<div class="van-cell__value"><span>状态</span></div>-->
  </div>

  <van-actionsheet v-model="showActionsheet" :actions="actionsActionsheet" />

  <div>
    <van-cell-group>
    	<div class="van-cell van-hairline van-field" @click="$router.push({ name: 'tradeBusinessSell' })">选择托管销售(业务)</div>

      <div class="van-cell van-cell--required van-hairline van-field" @click="showActionsheet = true">{{ currentActionsheet.name }}</div>

      <div class="van-cell van-cell--required van-hairline van-field" :class="{'van-cell--center van-field--error': errors.has('amount')}">
        <div class="van-cell__title"><span>销售数量</span></div>
        <div class="van-cell__value">
          <input v-model="fromField.amount" v-validate="'required|numeric'" name="amount" type="text" placeholder="请输入销售数量" class="van-field__control">
          <div v-if="errors.has('amount')" class="van-field__error-message">{{ errors.first('amount') }}</div>
        </div>
      </div>

      <div class="van-cell van-cell--required van-hairline van-field" :class="{'van-cell--center van-field--error': errors.has('safePassword')}">
        <div class="van-cell__title"><span>交易密码</span></div>
        <div class="van-cell__value">
          <input v-model="fromField.safePassword" v-validate="'required|min:6'" name="safePassword" type="password" placeholder="请输入交易密码" class="van-field__control">
          <div v-if="errors.has('safePassword')" class="van-field__error-message">{{ errors.first('safePassword') }}</div>
        </div>
      </div>
    </van-cell-group>
  </div>

  <div slot="footer" class="van-panel__footer" style="text-align: right;">
    <van-button size="small" type="primary" :loading="submitLoading" @click="onSubmit">提交</van-button>
  </div>

  <div slot="footer" class="van-panel__footer" style="color: red;padding:0;">
    说明：<br />
    1.零售积分：2000起提100的倍数。
  </div>
</van-panel>
</template>

<script>
import qs from 'qs';
import { Actionsheet, Cell, CellGroup, Panel, Button, Field, Toast } from 'vant';
import ajaxVant from '../../../utils/ajaxVant';
import auth from '../../../utils/auth';

export default {
  components: {
    [Actionsheet.name]: Actionsheet,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Panel.name]: Panel,
    [Button.name]: Button,
    [Field.name]: Field
  },
  data() {
    return {
      showActionsheet: false,
      currentActionsheet: {
        name: '请选择收款方式'
      },
      actionsActionsheet: [],
      viewLoading: false,
      submitLoading: false,
      userWallet: {},
      fromField: {
        amount: '',
        safePassword: ''
      }
    };
  },
  mounted() {
    this.getUserWallet();
    this.getData();
  },
  methods: {
    getData() {
      var _this = this;
      auth.getToken().then(function(token) {
        ajaxVant.get('/user/bankInfo?token=' + token).then(function(data) {
          if (data !== false) {
            for (var p in data.pager) {
              _this.actionsActionsheet.push({
                name: data.pager[p].name,
                'bank_name': data.pager[p].bank_name,
                'user_bank_info_id': data.pager[p].user_bank_info_id,
                callback: function(action) {
                  _this.fromField['user_bank_info_id'] = action.user_bank_info_id;
                  _this.currentActionsheet.name = action.name + ',' + action.bank_name;
                  _this.showActionsheet = false;
                }
              });
            }
          }
        });
      });
    },
    getUserWallet() {
      var _this = this;
      auth.getToken().then(function(token) {
        ajaxVant.get('/user/wallet?token=' + token).then(function(data) {
          if (data !== false) {
            _this.userWallet = data.user_wallet;
            _this.viewLoading = true;
          }
        });
      });
    },
    onSubmit(e) {
      var _this = this;
      this.$validator.validateAll().then((result) => {
        if (result) {
          _this.submitLoading = true;
          auth.getToken().then(function(token) {
            ajaxVant.post('/trade/sell?token=' + token, qs.stringify(_this.fromField)).then(function(data) {
              if (data !== false) {
                Toast(data.msg);

                setTimeout(() => {
                  Toast.clear();
                  _this.$router.push({ name: 'tradeSellLog' });
                }, 1000);
              }

              _this.submitLoading = false;
            });
          });
        }
      }).catch((err) => {
        console.log(err);
      });
    }
  }
};

</script>
